<template>
  <Card class="!m-10px">
    <Table :columns="columns" :data-source="permissionList" bordered rowKey="id" :loading="loading">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'compName'">
          {{ record.type === 1 ? record.code : '' }}
        </template>
        <template v-if="column.dataIndex === 'btnName'">
          {{ record.type === 2 ? record.code : '' }}
        </template>
        <template v-if="column.dataIndex === 'operator'">
          <Button v-if="record.type === 1" @click="showSavePermission(record)">添加</Button>
          <Button>修改</Button>
          <Button @click="removePermission(record.id)">删除</Button>
        </template>
      </template>
    </Table>

    <Modal
      v-model:visible="visible"
      :title="`${parentPermission.level as number < 3 ? '添加菜单' : '添加按钮'}`"
      @ok="savePermission"
    >
      <Form :label-col="{ span: 6 }" class="!m-10px">
        <FormItem label="名称"><Input v-model:value="permission.name" /></FormItem>
        <FormItem label="路由组件名称" v-if="parentPermission.level as number < 3">
          <Input v-model:value="permission.code" />
        </FormItem>
        <FormItem label="按钮权限值" v-else><Input v-model:value="permission.code" /></FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Permission',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card, Table, Button, Modal, Form, FormItem, Input } from 'ant-design-vue';
  import {
    getPermissionListApi,
    savePermissionApi,
    removePermissionApi,
  } from '/@/api/acl/permission';
  import {
    PermissionListModel,
    PermissionModel,
    PermissionLevelModel,
    GetPermissionListResponseModel,
  } from '/@/api/acl/model/permissionModel';

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '路由组件名称',
      dataIndex: 'compName',
    },
    {
      title: '按钮权限值',
      dataIndex: 'btnName',
    },
    {
      title: '操作',
      dataIndex: 'operator',
    },
  ];

  const loading = ref<boolean>(false);
  const visible = ref<boolean>(false);
  const parentPermission = ref<Partial<PermissionModel>>({});
  const permission = ref<Partial<PermissionModel>>({});
  const permissionList = ref<PermissionListModel>([]);

  // 过滤权限菜单空的children
  function filterEmptyChildren(permission: GetPermissionListResponseModel | PermissionModel) {
    if (permission.children && permission.children.length) {
      permission.children.forEach((cp) => filterEmptyChildren(cp));
    } else {
      permission.children = undefined;
    }
    return permission;
  }

  // 获取权限菜单列表
  const getPermissionList = async () => {
    loading.value = true;
    const res = await getPermissionListApi();
    // 需要过滤掉4级菜单（按钮）的children属性
    const filterPermissionList = filterEmptyChildren(res);
    permissionList.value = filterPermissionList.children as PermissionListModel;
    loading.value = false;
  };

  onMounted(getPermissionList);
  // 显示
  const showSavePermission = (record: PermissionModel) => {
    visible.value = true;
    parentPermission.value = record;
  };

  // 保存权限菜单
  const savePermission = async () => {
    await savePermissionApi({
      name: permission.value.name as string,
      code: permission.value.code as string,
      level: ((parentPermission.value.level as number) + 1) as PermissionLevelModel,
      pid: parentPermission.value.id,
      type: (parentPermission.value.level as number) < 3 ? 1 : 2,
    });

    getPermissionList();
    visible.value = false;
  };

  // 删除权限菜单
  const removePermission = async (id: string) => {
    await removePermissionApi(id);
    getPermissionList();
  };
</script>
